<script setup lang="ts">
import * as echarts from 'echarts/core'
import { onMounted, ref, onBeforeUnmount } from 'vue'
import { GridComponent } from 'echarts/components'
import { LineChart } from 'echarts/charts'
import { UniversalTransition } from 'echarts/features'
import { CanvasRenderer } from 'echarts/renderers'

echarts.use([GridComponent, LineChart, CanvasRenderer, UniversalTransition])
const loginchartDom = ref<HTMLElement | null>(null)
let myChart: echarts.ECharts | null = null
onMounted(() => {
  if (loginchartDom.value) {
    myChart = echarts.init(loginchartDom.value)
    myChart.setOption({
      xAxis: {
        type: 'category',
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
      },
      yAxis: {
        type: 'value',
      },
      series: [
        {
          data: [150, 230, 224, 218, 135, 147, 260],
          type: 'line',
        },
      ],
    })
  }
})
// 在组件卸载时清理图表实例，防止内存泄漏
onBeforeUnmount(() => {
  if (myChart) {
    myChart.dispose()
    myChart = null
  }
})
</script>

<template>
  <div class="echart" ref="loginchartDom"></div>
</template>

<style scoped lang="scss">
.echart {
  height: 410px;
  overflow: hidden;
}
</style>
